<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>进货管理</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="stylesheet" href="../../../lib/layui-v2.5.5/css/layui.css" media="all">
	<link rel="stylesheet" href="../../../css/public.css" media="all">
	<style>
		.layui-layer-page {
			padding: 10px !important;
		}
	</style>
</head>

<body>
	<div class="layuimini-container">
		<div class="layuimini-main">
			<!--搜索开始-->
			<fieldset class="layui-elem-field layuimini-search">
				<legend>搜索信息</legend>
				<div style="margin: 10px 10px 10px 10px">
					<form class="layui-form layui-form-pane" action="" id="searchFrm">
						<div class="layui-form-item">
							<div class="layui-inline">
								<label class="layui-form-label">供应商</label>
								<div class="layui-input-inline">
									<select name="providerid" class="providerSel">
										<option value="">请选择供应商</option>
									</select>
								</div>
							</div>
							<div class="layui-inline">
								<label class="layui-form-label">商品名称</label>
								<div class="layui-input-inline">
									<select name="goodsid" class="goodsSel">
										<option value="">请选择商品</option>
									</select>
								</div>
							</div>
							<div class="layui-inline">
								<label class="layui-form-label">开始时间</label>
								<div class="layui-input-inline">
									<input type="text" name="startTime" id="startTime" readonly="readonly"
										autocomplete="off" class="layui-input">
								</div>
							</div>
							<div class="layui-inline">
								<label class="layui-form-label">结束时间</label>
								<div class="layui-input-inline">
									<input type="text" name="endTime" id="endTime" readonly="readonly"
										autocomplete="off" class="layui-input">
								</div>
							</div>
						</div>
						<div class="layui-form-item">
							<div class="layui-block" style="text-align: center;">
								<a class="layui-btn " lay-submit="" lay-filter="data-search-btn"><label
										class="layui-icon layui-icon-search"></label>搜索</a>
								<a class="layui-btn layui-btn-warm" onclick="javascript:$('#searchFrm')[0].reset()"
									lay-filter="data-search-btn"><label
										class="layui-icon layui-icon-refresh"></label>重置</a>
							</div>
						</div>
					</form>
				</div>
			</fieldset>
			<!--搜索结束-->

			<!--表格开始-->
			<table class="layui-hide" id="inportTable" lay-filter="inportTable"></table>
			<div style="display: none;" id="inportToolBar">
				<a class="layui-btn layui-btn-sm inport_btn_add" lay-event="add">添加</a>
			</div>
			<div style="display: none;" id="inportTableBar">
				<a class="layui-btn layui-btn-xs layui-btn-warm data-count-delete inport_btn_update"
					lay-event="update">修改</a>
				<a class="layui-btn layui-btn-xs layui-btn-danger data-count-delete inport_btn_delete"
					lay-event="delete">删除</a>
				<a class="layui-btn layui-btn-xs layui-btn-warm data-count-delete inport_btn_back"
					lay-event="back">退货</a>
			</div>
			<!--表格结束-->

			<!--添加和修改的弹出层开始-->
			<div id="addOrUpdateDiv" style="display: none;padding: 0.3125rem">
				<form method="post" class="layui-form layui-form-pane" lay-filter="dataFrm" id="dataFrm">
					<div class="layui-form-item">
						<div class="layui-inline">
							<label class="layui-form-label">供应商</label>
							<div class="layui-input-inline">
								<input type="hidden" name="id" />
								<select name="providerid" id="data_providerid" lay-filter="data_providerid"
									class="providerSel">
									<option value="">请选择供应商</option>
								</select>
							</div>
						</div>

						<div class="layui-inline">
							<label class="layui-form-label">商品名称</label>
							<div class="layui-input-inline">
								<input type="hidden" name="id" />
								<select name="goodsid" id="data_goodsid" class="goodsDataSel">
									<option value="">请选择商品</option>
								</select>
							</div>
						</div>
					</div>
					<div class="layui-form-item">
						<div class="layui-inline">
							<label class="layui-form-label">进货数量</label>
							<div class="layui-input-inline">
								<input type="text" name="number" id="numbers" lay-verify="required|number" autocomplete="off"
									class="layui-input">
							</div>
						</div>
						<div class="layui-inline">
							<label class="layui-form-label">进货价格</label>
							<div class="layui-input-inline">
								<input type="text" name="inportprice" lay-verify="required|number" autocomplete="off"
									class="layui-input">
							</div>
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">支付类型</label>
						<div class="layui-input-block">
							<input type="radio" name="paytype" value="支付宝" title="支付宝" checked="">
							<input type="radio" name="paytype" value="微信" title="微信">
							<input type="radio" name="paytype" value="银联" title="银联">
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">备注</label>
						<div class="layui-input-block">
							<textarea placeholder="请输入备注" name="remark" class="layui-textarea"></textarea>
						</div>
					</div>
					<div class="layui-form-item">
						<div class="" style="text-align: center;">
							<a class="layui-btn layui-btn-sm" lay-submit="" lay-filter="doSubmit"><label
									class="layui-icon layui-icon-release"></label>提交</a>
							<a class="layui-btn layui-btn-sm layui-btn-warm"
								onclick="javascript:$('#dataFrm')[0].reset()" lay-filter="data-search-btn"><label
									class="layui-icon layui-icon-refresh"></label>重置</a>
						</div>
					</div>
				</form>
			</div>
			<!--添加和修改的弹出层结束-->

			<!--退货的弹出层 开始-->
			<div id="backDiv" style="display: none;padding: 0.3125rem">
				<form method="post" class="layui-form layui-form-pane" lay-filter="backDataFrm" id="backDataFrm">
					<div class="layui-form-item">
						<label class="layui-form-label">退货数量</label>
						<div class="layui-input-block">
							<input type="hidden" name="goodsid" id="back_goodsid" />
							<input type="hidden" name="inportid" id="inportid" />
							<input type="text" name="number" lay-verify="required|number|checkgoodsnumber"
								autocomplete="off" class="layui-input">
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">退货原因</label>
						<div class="layui-input-block">
							<textarea placeholder="请输入退货原因" name="remark" class="layui-textarea"></textarea>
						</div>
					</div>
					<div class="layui-form-item">
						<div class="" style="text-align: center;">
							<a class="layui-btn layui-btn-sm " lay-submit="" lay-filter="doBack"><label
									class="layui-icon  layui-icon-release"></label>提交</a>
							<a class="layui-btn layui-btn-sm layui-btn-warm"
								onclick="javascript:$('#backDataFrm')[0].reset()" lay-filter="data-search-btn"><label
									class="layui-icon layui-icon-refresh"></label>重置</a>
						</div>
					</div>
				</form>
			</div>
			<!--退货的弹出层 结束-->
		</div>
	</div>
	<script src="../../../lib/jquery-3.4.1/jquery-3.4.1.min.js" charset="utf-8"></script>
	<script src="../../../lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
	<script src="../../../js/lay-config.js?v=1.0.4" charset="utf-8"></script>
	<script src="../../../lib/jq-module/jquery.particleground.min.js" charset="utf-8"></script>
	<script src="../../../lib/common/jquery.cookie.min.js" charset="utf-8"></script>
	<script src="../../../lib/common/common.js" charset="utf-8"></script>

	<script>
		layui.use(['form', 'table', 'laydate', 'layer'], function () {
			var form = layui.form;
			var table = layui.table;
			var laydate = layui.laydate;
			var layer = layui.layer;

			//渲染时间选择器
			laydate.render({
				elem: '#startTime',
				type: 'datetime'
			});
			laydate.render({
				elem: '#endTime',
				type: 'datetime'
			});

			//加载查询条件里面的供应商的下拉列表
			$.get(api + "provider/getAllAvailableProvider", function (res) {
				var search_providerid = $(".providerSel");
				var html = "<option value =''>请选择供应商</option>";
				var data = res.data;
				$.each(data, function (index, item) {
					// 注入供应商ID 和 名称
					html += "<option value =" + item.id + ">" + item.providername + "</option>"
				});
				search_providerid.html(html);
				// 重载下拉框
				form.render("select");
			});


			//加载查询条件里面的商品的下拉列表
			$.get(api + "goods/getAllAvailableGoods", function (res) {
				var search_goodsid = $(".goodsSel");
				var html = "<option value =''>请选择商品</option>";
				var data = res.data;
				$.each(data, function (index, item) {
					// 注入商品ID 和 名称
					html += "<option value =" + item.id + ">" + item.goodsname + "--[" + item.size + "]" + "</option>"
				});
				search_goodsid.html(html);
				// 重载下拉框
				form.render("select");
			});


			var tableIns = table.render({
				elem: '#inportTable',
				url: api + 'inport/loadAllInport',
				toolbar: "#inportToolBar",
				cellMinWidth: true,
				cols: [[
					{ field: 'id', title: 'ID', align: "center", width: 80 },
					{ field: 'providername', title: '供应商', align: "center", width: 150 },
					{ field: 'goodsname', title: '商品名称', align: "center", width: 150 },
					{ field: 'size', title: '规格', align: "center", width: 150 },
					{ field: 'inporttime', title: '进货时间', align: "center", width: 180 },
					{ field: 'operateperson', title: '操作人', align: "center", width: 120 },
					{ field: 'number', title: '进货数量', align: "center", width: 120 },
					{ field: 'inportprice', title: '进货价格(￥)', align: "center", width: 120 },
					{ field: 'paytype', title: '支付类型', align: "center", width: 120 },
					{ field: 'remark', title: '备注', align: "center", width: 150 },
					{ title: '操作', templet: '#inportTableBar', fixed: "right", align: "center", width: 200 }
				]],
				page: true
			});

			// 监听搜索操作
			form.on('submit(data-search-btn)', function (data) {
				var params = $("#searchFrm").serialize();
				//执行搜索重载
				table.reload('inportTable', {
					page: {
						curr: 1
					}
					, url: api + 'inport/loadAllInport?' + params
				});
				return false;
			});

			//监听表头的事件
			table.on('toolbar(inportTable)', function (obj) {
				var checkStatus = table.checkStatus(obj.config.id);
				switch (obj.event) {
					case 'add':
						openAddInport();
						break;
				};
			});

			//监听添加弹出层里面的 供应商   的下拉改变事件
			form.on("select(data_providerid)", function (obj) {
				// 获取供应商ID
				var providerid = obj.value;
				// 获取商品下拉框
				var goodsDataSel = $(".goodsDataSel");
				initGoodsSeleted(providerid, goodsDataSel)
			})

			// 初始化下拉框 两级联动
			/**
			 *  providerid  供应商id
			 *  elem		商品下拉框
			 *  fun			回调函数
			 */
			function initGoodsSeleted(providerid, elem, fun) {
				var html = "<option value =''>请选择商品</option>";
				if (providerid != "") {
					// 根据供应商ID 查询商品
					$.get(api + "goods/getGoodsByProviderId", { providerid: providerid }, function (res) {
						var data = res.data;

						$.each(data, function (i, item) {
							// 进行追加数据
							html += "<option value =" + item.id + ">" + item.goodsname + "[" + item.size + "]" + "</option>"
						});
						
						// 覆盖到 elem  html内容当中
						elem.html(html);
						
						// 重载下拉框
						form.render("select");

						// 进行回调数据    
						if (fun != undefined) {
							fun();
						}
					});
				} else {
					elem.html(html);
					form.render("select");
				}
			}


			//监听行数据的事件
			table.on('tool(inportTable)', function (obj) {
				var data = obj.data;
				if (obj.event === 'delete') {
					layer.confirm('真的删除这条进货数据么', function (index) {
						$.post(api + "inport/deleteInport", { id: data.id }, function (res) {
							layer.msg(res.msg);
							obj.del();
							layer.close(index);
						})
					});
				} else if (obj.event === 'update') {
					openUpdateInport(data);
				} else if (obj.event === 'back') {
					openBack(data);
				}
			});

			//打开添加进货的弹层
			var mainIndex;
			var url;  //动态的url
			function openAddInport() {
				mainIndex = layer.open({
					type: 1,
					title: '添加进货',
					content: $("#addOrUpdateDiv"),
					area: ['675px', '407px'],
					success: function (index) {
						$("#data_providerid").attr("disabled", false);
						$("#data_goodsid").attr("disabled", false);
						url = api + "inport/addInport";
						//重置表单
						$("#dataFrm")[0].reset();

					}
				});
			}


			// 修改进货 
			function openUpdateInport(data) {
				mainIndex = layer.open({
					type: 1,
					title: '修改[' + data.goodsname + ']进货',
					content: $("#addOrUpdateDiv"),
					area: ['675px', '407px'],
					success: function (index) {


						layer.tips('需要修改进货数量直接覆盖数量即可', '#numbers', {
							tips: 1
						});

						url = api + "inport/updateInport";
						var providerid = data.providerid;
						var goodsDataSel = $(".goodsDataSel");
						// 调用初始化下拉框 
						initGoodsSeleted(providerid, goodsDataSel, function () {
							//装载数据表格
							form.val("dataFrm", data);
						});
						// 禁用下拉框  
						$("#data_providerid").attr("disabled", true);
						$("#data_goodsid").attr("disabled", true);
						form.render();



					}
				});
			}
			//提交数据
			form.on("submit(doSubmit)", function (data) {
				var params = $("#dataFrm").serialize();
				$.post(url, params, function (res) {
					layer.msg(res.msg);
					if (res.code == 200) {
						tableIns.reload();
					}
					layer.close(mainIndex);
				})
				return false;
			});

			//打开退货的弹出层
			function openBack(data) {
				mainIndex = layer.open({
					type: 1,
					title: "【" + data.goodsname + '】的退货',
					content: $("#backDiv"),
					area: ['435px', '300px'],
					success: function (index) {
						//重置表单
						$("#dataFrm")[0].reset();
						// 装载数据
						form.val("backDataFrm", data);
						form.val("backDataFrm", { number: '', inportid: data.id });
					}
				});
			}

			//提交数据
			form.on("submit(doBack)", function (data) {
				// 序列化
				var params = $("#backDataFrm").serialize();

				$.post(api + "outport/addOutport", params, function (res) {
					layer.msg(res.msg);
					if (res.code == 200) {
						tableIns.reload();
					}
					layer.close(mainIndex);
				})
				return false;
			});

			form.verify({
				checkgoodsnumber: function (value, item) { //value：表单的值、item：表单的DOM对象
					var str;
					var goodsid = $("#back_goodsid").val();
					$.ajax({
						//  获取商品的数量  
						url: api + "goods/getGoodsByGoodId?goodsid=" + goodsid,
						type: 'get',
						async: false,
						success: function (res) {
							//  判断 商品 的数量 是否大于我要 退货的  数量  
							// 大于则违反逻辑
							if (res.data.number < value) {
								str = "退货数量不能大于当前商品库存";
							}
						}
					})
					return str;
				}
			});
		});
	</script>
	<script>

	</script>

</body>

</html>